<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">转码</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="12" v-model="inputData"></textarea>
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输出文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="12" v-model="outputData"></textarea>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="pull-left">
            <a class="btn btn-default mr-md" @click="toEscape">escape</a>
            <a class="btn btn-default mr-md" @click="toUnescape">unescape</a>
            <a class="btn btn-default mr-md" @click="toEncodeURI">encodeURI</a>
            <a class="btn btn-default mr-md" @click="toDecodeURI">decodeURI</a>
            <a class="btn btn-default mr-md" @click="toEncodeURIComponent">encodeURIComponent</a>
            <a class="btn btn-default" @click="toDecodeURIComponent">decodeURIComponent</a>
          </div>
          <div class="pull-right">
            <span class="form-inline">
              <SwitchRich v-model="isPipe" label="覆盖输入" />
            </span>
            <Pipe name="urlhex" :operation="{inputData: outputData}" />
          </div>
        </div>
      </div>
      <div class="row" style="padding:24px 15px 0;">
        <h4>escape 和 unescape</h4>
        <div style="padding-bottom:24px;line-height:1.8;color:#666">
          escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。
          采用unicode字符集对指定的字符串除0-255以外进行编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。
          escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z。
          escape()函数用于js对字符串进行编码。
        </div>
        <h4>encodeURI 和 decodeURI</h4>
        <div style="padding-bottom:24px;line-height:1.8;color:#666">
          把URI字符串采用UTF-8编码格式转化成escape各式的字符串。
          encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
          encodeURI()用于整个url编码
        </div>
        <h4>encodeURIComponent 和 decodeURIComponent</h4>
        <div style="padding-bottom:24px;line-height:1.8;color:#666">
          与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。
          因此，"; / ? : @ & = + $ , #"，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。把URI字符串采用UTF-8编码格式转化成escape格式的字符串。
          encodeURIComponent() 用于参数的传递，参数包含特殊字符可能会造成间断。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import Pipe from '../index/pipe.vue'

/* 加密与解密 */
export default {
  components: {
    SwitchRich,
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      isPipe: false
    }
  },

  methods: {
    /**
     * @function 16进制加密
    */
    toEscape () {
      this.outputData = escape(this.inputData)
      if (this.isPipe) {
        this.inputData = this.outputData
      }
    },
    /**
     * @function 16进制加密
    */
    toUnescape () {
      this.outputData = unescape(this.inputData)
      if (this.isPipe) {
        this.inputData = this.outputData
      }
    },
    /**
     * @function 16进制加密
    */
    toEncodeURI () {
      this.outputData = encodeURI(this.inputData)
      if (this.isPipe) {
        this.inputData = this.outputData
      }
    },
    /**
     * @function 16进制加密
    */
    toDecodeURI () {
      this.outputData = decodeURI(this.inputData)
      if (this.isPipe) {
        this.inputData = this.outputData
      }
    },
    /**
     * @function 16进制加密
    */
    toEncodeURIComponent () {
      this.outputData = encodeURIComponent(this.inputData)
      if (this.isPipe) {
        this.inputData = this.outputData
      }
    },
    /**
     * @function 16进制加密
    */
    toDecodeURIComponent () {
      this.outputData = decodeURIComponent(this.inputData)
      if (this.isPipe) {
        this.inputData = this.outputData
      }
    }
  },

  mounted () {
    // 管道数据
    if (this.$store.state.inputData) {
      this.inputData = this.$store.state.inputData
      this.$store.state.inputData = ''
    }
    // 初始处理
    this.toEscape()
  }
}
</script>

<style lang="less">

</style>
